<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>商城商城商品列表</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		body {

		}
		/*新品速递改写*/

		.newproduct {
			height: 2.65rem;

			border-bottom: .05rem solid rgba(238, 238, 238, 0.5);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0.75rem;
			margin-top: 0.3rem;
		}

		.new_wraper {
			padding-left:0.75rem;padding-right:0.75rem;
		}

		.newproduct_left {
			background: url();
			background-repeat: no-repeat;
			background-size: auto 0.8rem;
			background-position: left center;
			padding-left: 10px;
			display: inline-block;
			font-size: 0.85rem;
			font-family: PingFangSC-Semibold;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}

		.newproduct_right span {
			font-size: 0.65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.newproduct_list {
			/*height: 6.75rem;*/
			background: rgba(255, 255, 255, 1);
            padding:0.5rem;
			box-sizing: border-box;

			margin-top:0.5rem;
			border-radius:0.4rem

		}

		.left_img {
			width: 5rem;
			margin-right: 0.75rem;
		}

		.left_img img {
			width: 5rem;
			width:5rem;
			border-radius: 0.2rem;
		}

		.right_cont {



		}

		.top_title {

		}

		.top_title img {
			width: 1.6rem;
			height: 0.9rem;
			display: inline-block;
			transform: translateY(0.15rem);
			margin-right: 0.2rem;
		}

		.top_title {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #222222;
			line-height: 1.1rem;
			max-height: 2.2rem;
			display: inline-block;
			font-size:0.75rem
		}

		.title {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;

		}

		.mid_decri {
			/*display: flex;*/
		}

		.mid_decri_item {
			padding: 0 0.1rem;
			height: 0.8rem;
			line-height: 0.8rem;
			border-radius: 0.1rem;
			border:0.03rem solid #005A93;
			background:rgba(239,249,255,0.4);
			font-size: 0.5rem;
			border-radius: 0.1rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color:#005A93;
			/*text-align: center;*/
			float: left;
			margin-top: 0.3rem;
			margin-right: 0.25rem;
			margin-bottom: 0.4rem;
			padding-top: 0.010rem;
		}

		.clear {
			clear: both;
		}

		.now_price {
			font-size: 1.1rem;
			font-family: 'PingFangSC-Semibold';
			font-weight: 600;
			color: rgba(255, 102, 66, 1);
			line-height: 1rem;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<!-- 搜索商品每项 -->
		<div class="new_wraper" v-if="info.length">
			<div class="newproduct_list flex-box-x" v-for="(vo, index) in info" tapmode @click="openWin_goods_detail(vo.id)">
				<div class="left_img">
					<img :src="vo.cover" alt="">
				</div>
				<div class="right_cont col-xs-x">
					<div class="top_title title">
						<!-- <img v-if="vo.sign == '新品'" src="../../image/icon/xinpin.png" alt=""> -->
						<!-- <img v-if="vo.sign == '秒杀'" src="../../image/icon/miaosha.png" alt=""> -->
						<!-- <img v-if="vo.sign == '精品'" src="../../image/icon/tuijian.png" alt="">
						<img v-if="vo.sign == '热销'" src="../../image/icon/qingcang.png" alt="">
						<img v-if="vo.sign == '拼团'" src="../../image/icon/pintuan.png" alt="">
						<img v-if="vo.sign == '秒杀'" src="../../image/icon/miaosha.png" alt="">  -->

						{{vo.title}}

					</div>

					<div class="mid_decri" v-for="item in vo.service_name">

						<div class="mid_decri_item" v-html="item"></div>
					</div>
					<!-- <div v-for="item in vo.service_name">
						<span style="border:0.05rem solid #005A93;background:rgba(239,249,255,0.4);font-size:0.55rem;border-radius: 0.15rem;color:#005A93;padding:0.05rem 0.12rem 0">大聚会</span>
					</div> -->
					<section class="clear"></section>
					<div>
						<span class="" style="font-size: .6rem;color:#005a93;">零售价:￥<span class="" style="font-size:0.9rem;color:#005a93;line-height:1.1rem;">{{vo.current_price}}</span><span style="font-size:.65rem">/{{vo.unit_name}}</span></span>

						<!-- <del style="color:rgba(153,153,153,.7);font-size: .65rem;font-weight:400;">￥{{vo.cost_price}}</del> -->
					</div>
					<div v-if="vo.vip_show>0">
						<span class="" style="font-size:0.6rem;color:#E90000;">会员价:￥<span class="" style="font-size:1.2rem;color:#e90000;line-height:1.35rem;">{{price_format('yuan',vo.vip_price)}}</span><span class="" style="font-size:0.9rem;">.{{price_format('fen',vo.vip_price)}}</span><span style="font-size:.65rem">/{{vo.unit_name}}</span></span>
					</div>

				</div>
			</div>
		</div>
		<!-- 搜索End -->
		<!-- info.length<1 -->
		<div v-if="info.length<1" class="aui-text-center" style="margin-top: 40%;">
			<img src="../../image/bg/bg-nomessage.png" style="width:7.55rem;margin-left:50%;transform:translateX(-50%);margin-bottom:1.35rem" />
			<div class="aui-margin-t-10" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;">
				暂无内容
			</div>
		</div>
		<!-- <div v-if="loading_bottom" class="" style="width:3rem;height:3rem;margin:0 auto">
			<img v-if="loading_bottom" src="../../image/icon/loading.gif" alt="">
			<span v-else>已经到底了</span>
		</div> -->
		<div class="">
			<div class="" v-if="loading_bottom" class="" style="width:2.5rem;height:2.5rem;margin:0 auto">
				<img src="../../image/icon/loading.gif" alt="">
			</div>
			<div class="" v-if="no_data" class="" style="width:5rem;height:3rem;margin:0 auto;margin-top:.75rem;color:#999999">
				已经到底了~
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			reg_type:0,
			is_vip:0,
			sign: 'all',
			page: 1,
			loadmore: true,
			info: [],
			loading_bottom: false,
			loadmore_new: false,
			first_load:false,
			no_data:false,
			localcity:{"id":2608,"parentid":235,"categoryname":"平邑县","spell":"pingyixian","first_letter":"P"}
		},
		methods: {
			get_list: function() {
				get_data_updown('api/good/goodlist', {
					sign: vm.sign,
					page: vm.page,
					coupon:api.pageParam.coupon,
					region_name:vm.localcity.categoryname,
					token:$api.getStorage('token'),
				}, function(ret) {
					if (ret.status) {
						// if (ret.data.length < 20) {
						// 	vm.loadmore = false
						// }
						if(ret.data.length <= 20){
							vm.loadmore_new = true
						}
						if(ret.data.length >= 20){
						  	vm.first_load = true
						}
						ret.data.forEach(function(el) {
							vm.info.push(el)
						})
					}
				})
			},
			price_format: function(type, price) {
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			}
		}
	})
	apiready = function() {

		// if($api.getStorage('token')){
		// 	get_userinfo()
		// }
		
		var temp_localcity = api.getPrefs({
				sync: true,
				key: 'localcity'
		});

		if (temp_localcity) {
				vm.localcity = JSON.parse(temp_localcity);
		}

		api.addEventListener({
				name: 'jobRefresh'
		}, function(ret, err) {
				localcity(function(ret) {
						if (ret) {
								vm.localcity = ret;
						  	vm.get_list()
						}
				})
		});

		vm.sign = $api.getStorage('sign');
		$api.rmStorage('sign')
		vm.get_list()
			fnInitPullRefresh(function() {
				vm.page = 1;
				vm.loadmore = true
				vm.info = [];
				vm.get_list()
			})

		refresh_new(function() {
				setTimeout(function() {
					vm.page = 1;
					vm.loadmore = true
					vm.info = [];
					vm.get_list()
					api.refreshHeaderLoadDone()
				}, 1000)
				load_more_new()
				vm.no_data = false
			})
			// fnInitScrollToBottom(function() {
			// 	// vm.loading_bottom = true
			// 	// setTimeout(function() {
			// 		vm.page++;
			// 		vm.get_list();
			// 		// vm.loading_bottom = false
			// 	// }, 1000)
			// })
		load_more_new();
		add_event('goods_sign', function(ret) {
			vm.sign = ret.sign
			vm.page = 1;
			vm.loadmore = true
			vm.info = [];
			vm.get_list();
			load_more_new();
			vm.no_data = false
		})

	};

	
	function get_userinfo() {
		get_data('api/user/getUserInfo', {
			token: $api.getStorage('token')
		}, function (ret) {
			// console.log(JSON.stringify(ret))
			if (ret.status == 1) {
				vm.reg_type = ret.data.reg_type
				vm.is_vip = ret.data.is_vip
				api.setPrefs({
					key: 'reg_type',
					value: vm.reg_type
				});
				api.setPrefs({
					key: 'is_vip',
					value: vm.is_vip
				});
			}
		}, false)
	}

	function load_more_new() {
		api.addEventListener({
			name: 'scrolltobottom',
			extra: {
				threshold: 55 //设置距离底部多少距离时触发，默认值为0，数字类型
			}
		}, function(ret, err) {
			vm.loading_bottom = true
			setTimeout(function() {
					vm.page++;
					vm.get_list();
						if(vm.loadmore_new){
							vm.loading_bottom = false
							remove_scroll()
						}
				}, 1100)

		});
	}
	function remove_scroll() {
		api.removeEventListener({
				name: 'scrolltobottom'
		});
		setTimeout(function(){
			vm.no_data = true
		},300)
	}
</script>

</html>
